<template>
    <div class="shopping-home">
        <!-- 1. 公用的头部区域 -->
        <common-nav-header>
            <template #left>
                <a class="back fl" href="javascript:;"></a>
            </template>
            <template #title>
                <h1 class="title fl">购物车</h1>
            </template>
            <template #right>
                <a class="cart fr" href="javascript:;"></a>
            </template>
        </common-nav-header>
        <!-- 2. 所有商品 -->
        <div class="yes-product" v-if="!isHasPro">
            <!-- 2-1.用户加入购物车的所有商品 -->
            <div class="cart-all-shop">
                <shopping-cart-item name="电池专区111"></shopping-cart-item>
                <shopping-cart-item name="电池专区222"></shopping-cart-item>
            </div>
            <!-- 2-2. 商品合计 -->
            <div class="shop-count-sum-total">
                <div class="header-line"></div>
                <div class="shop-count clearFix">
                    <label for="ckAll" class="ckAll fl clearFix">
                        <input type="radio" name="checkAll" class="checkAll" id="ckAll" />
                        <span>全选</span>
                    </label>
                    <div class="count-total clearFix">
                        <strong class="fl">
                            <em class="fl">合计：</em>
                            <span class="fl">￥0</span>
                        </strong>
                        <div class="count-btn clearFix fr">
                            <button class="fl">结算(0)</button>
                        </div>
                    </div>
                </div>
                <div class="footer-line"></div>
            </div>
        </div>
        <!-- 3. 购物车暂无商品 -->
        <div class="no-product" v-if="isHasPro">
            <a href="javascript:;">
                <img src="/images/noProducts.png" alt="购物车暂无商品" title="购物车暂无商品" />
                <span>购物车暂无商品</span>
            </a>
            <button>去逛逛</button>
        </div>
    </div>
</template>

<script>
    // 公用的头部导航区域
    import CommonNavHeader from '@/components/commonHeader/CommonNavHeader';

    // 具体的商品选项 - 组件封装
    import ShoppingCartItem from '@/components/cart/ShoppingCartItem';

    export default {
        name: 'shoppingHome',
        watch: {

        },
        created() {

        },
        mounted() {

        },
        data() {
            return {
                // 默认现在显示的购物车暂无商品
                isHasPro: false
            };
        },
        methods: {

        },
        computed: {

        },
        components: {
            CommonNavHeader,
            ShoppingCartItem
        }
    };

</script>

<style lang="scss" scoped>
    .shopping-home {
        width: 100%;
        background-color: #f4f4f4;
        padding-bottom: 0!important;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        .common-nav-header {
            .back {
                width: 39px;
                height: 88px;
                background: url(/images/wf_ico.png) no-repeat -154px 13px;
                background-size: 834px 535px;
            }
        }

        input {
            -webkit-appearance: none;
        }

        .shop-count-sum-total {
            position: fixed;
            left: 0;
            bottom: 98px;
            z-index: 999;
            width: 100%;

            .header-line {
                height: 1px;
                background-color: #ddd;
            }

            .footer-line {
                height: 2px;
                background-color: #f4f4f4;
            }

            .shop-count {
                padding: 14px 30px 14px 50px;
                box-sizing: border-box;
                -webkit-box-sizing: border-box;
                background-color: #fff;

                .ckAll {
                    margin-top: 12px;

                    .checkAll {
                        float: left;
                        width: 24px;
                        height: 24px;
                        background: url(/images/select_circle_ico.png) no-repeat;
                        background-size: 24px 24px;
                        margin: 6px 22px 0 0;
                    }

                    span {
                        float: left;
                        font-weight: normal;
                        font-size: 24px;
                        color: #666;
                    }
                }

                .count-total {
                    float: right;

                    strong {
                        font-weight: normal;
                        font-size: 24px;
                        line-height: 60px;
                        color: #666;
                        margin-right: 20px;

                        span {
                            color: #fe4646;
                        }
                    }

                    .count-btn {
                        button {
                            width: 150px;
                            height: 60px;
                            background-color: #fe4646;
                            border-radius: 30px;
                            font-weight: normal;
                            font-size: 24px;
                            line-height: 60px;
                            color: #fff;
                            text-align: center;
                        }
                    }
                }
            }
        }

        .no-product {
            width: 100%;
            background-color: #fff;
            text-align: center;
            padding-top: 227px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            a {
                display: block;
                width: 305px;
                margin: 0 auto;
                img {
                    width: 100%;
                    height: 331px;
                }

                span {
                    display: block;
                    font-weight: normal;
                    font-size: 30px;
                    color: rgba(0, 0, 0, .5);
                    margin-top: 56px;
                }
            }

            button {
                display: block;
                width: 280px;
                height: 80px;
                border: 1px solid #2fe4e0;
                border-radius: 40px;
                background-color: #fff;
                font-weight: normal;
                font-size: 30px;
                line-height: 80px;
                color: #2fe4e0;
                text-align: center;
                margin: 158px auto 0; 
            }
        }
    }

</style>
